<template>
  <div class="main_right">
    <!-- 面包屑导航 -->
    <div class="page_top">
      <section>
        <ol class="breadcrumb">
          <li>
            <router-link to="/nav/welcome">
              <span class="glyphicon glyphicon-home"></span> 首页
            </router-link>
          </li>
          <li>
            <a href>
              <span class="glyphicon glyphicon-stats"></span> 实时监测
            </a>
          </li>
          <li>数据通讯</li>
        </ol>
      </section>
    </div>

    <!-- 输入选项 -->
    <el-container>
      <el-header>
        <el-row>
          <el-col :span="24">
            <label class="control-label" for="dataSource">采集工况 &nbsp;</label>
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>

            <label class="control-label" for="dataSource" style="padding-left: 120px">选择时间 &nbsp;</label>
            <el-date-picker v-model="value1" type="date" placeholder="选择日期"></el-date-picker>
            <label class="control-label" style="padding-left: 320px"></label>
            <el-button @click="startSimulation()" type="primary" :disabled="isConnected">开始采集</el-button>
            <label class="control-label" style="padding-left: 20px"></label>
            <el-button @click="_destroySockJs" type="danger" :disabled="!isConnected">停止采集</el-button>
          </el-col>
        </el-row>
      </el-header>

      <!-- 数据显示 -->
      <el-main>
        <!-- cpu信息 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card>
              <div slot="header">
                <i class="el-icon-menu"></i>
                <span>接力器开关腔压力</span>
              </div>
              <div style="height: 335px" id="myChart1"></div>

              <!-- <el-table size="small" border :data="server.cpu" style="width: 100%">
                <el-table-column prop="key" label="时间"></el-table-column>
                <el-table-column prop="value" label="值"></el-table-column>
              </el-table> -->
            </el-card>
          </el-col>

          <el-col :span="12">
            <div class="grid-content bg-purple-light">
              <el-card>
                <div slot="header">
                  <i class="el-icon-menu"></i>
                  <span>上游延伸段水压力</span>
                </div>
                <div style="height: 335px" id="myChart2"></div>

                <!-- <el-table size="small" border :data="server.cpu" style="width: 100%">
                  <el-table-column prop="key" label="属性"></el-table-column>
                  <el-table-column prop="value" label="值"></el-table-column>
                </el-table> -->


              </el-card>
            </div>
          </el-col>
        </el-row>


      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "myChart",
  data() {
    return {
      chart: null,
      options: [
        {
          value: "选项1",
          label: "单机甩负荷"
        },
        {
          value: "选项2",
          label: "水泵断电"
        }
      ],
      value: "",
      value1: "",
      value2: "",

      getOption: function(
        legend,
        datax,
        datay1,
        namex,
        namey,
        markLine
      ) {
        var option3 = {
          tooltip: {
            show: true,
            trigger: "axis",
            axisPointer: {
              type: "line"
            }
          },
          // 辅助工具箱
          toolbox: {
            y: 1,
            itemSize: 12,
            show: true,
            feature: {
              mark: {
                show: true
              },
              dataZoom: {
                show: true
              },
              dataView: {
                show: true
              },
              saveAsImage: {
                show: true
              },
              restore: {
                show: true
              }
            }
          },
          // 数据区域缩放
          dataZoom: {
            show: false,
            realtime: true,
            start: 0,
            end: 100,
            height: 15
          },
          grid: {
            left: "2%",
            right: "2%",
            top: "11%",
            bottom: "5%",
            containLabel: true
          },
          // 横轴坐标轴
          xAxis: [
            {
              boundaryGap: true,
              splitLine: { 
                show: false
                },
              type: "category",
              axisLabel: {
                textStyle: {
                  color: "#333"
                }
              },
              data: datax,
              name: namex,
              nameLocation: "middle",
              nameGap: "23",
              axisLine: {
                lineStyle: {
                  color: "#ccc"
                },
                onZero: false
              },
              nameTextStyle: {
                color: "#333",
                fontSize: 12
              },
              axisTick: {
                show: true
              }
            }
          ],
          // 纵轴坐标轴
          yAxis: [
            {
              type: "value",
              scale: true,
              name: namey
            }
          ],
          // 数据内容数组
          series: [
            {
              type: "line",
              data: datay1
            }
          ]
        };
        return option3;
      },
    }
  },
  mounted() {
    this.initChart();
  },
  // 按钮方法
  methods: {
    startSimulation() {
      this.data = {
        categoryData: null,
        zhufa: null,
        daoye: null,
        faqian: null,
        fahou: null,
        liuliang: null,
        zhuansu: null,
        zhuanju: null,
        shuichui: null,
        xdliuliang: null,
      };
      this.$http.get("static/735184_Data.json").then(response => {
        this.dataRaw = response.data;
        //console.log(this.dataRaw);
        this.data.categoryData = [];
        this.data.zhufa = [];
        this.data.daoye = [];
        this.data.faqian = [];
        this.data.fahou = [];
        this.data.liuliang = [];
        this.data.zhuansu = [];
        this.data.zhuanju = [];
        this.data.shuichui = [];
        this.data.xdliuliang= [];
        for (var i = 0; i < 501; i++) {
          this.data.categoryData.push(i/5);
          this.data.zhufa.push(this.dataRaw.zhufaguanbi[i]/ 90);
          this.data.daoye.push(this.dataRaw.daoyeguanbi[i]);
          this.data.faqian.push(this.dataRaw.faqian[i]);
          this.data.fahou.push(this.dataRaw.fahou[i]);
          this.data.liuliang.push(this.dataRaw.guofaliuliang[i]);
          this.data.zhuansu.push(this.dataRaw.zhuansu[i]);
          this.data.zhuanju.push(this.dataRaw.zhuanju[i]);
          this.data.shuichui.push(this.dataRaw.shuichui[i]);
          this.data.xdliuliang.push(this.dataRaw.guofaliuliang[i]/62.21418);
        }
        this.chart1.setOption(
          this.getOption(
            "主阀开度",
            this.data.categoryData,
            this.data.faqian,
            "时间(s)",
            ""
          )
        );
        this.chart2.setOption(
          this.getOption(
            "导叶开度",
            this.data.categoryData,
            this.data.fahou,
            "时间(s)",
            ""
          )
        );
        this.chart3.setOption(
          this.getOption(
            "阀前水压",
            this.data.categoryData,
            this.data.faqian,
            "时间(s)",
            "阀前水压(m)"
          )
        );
        this.chart4.setOption(
          this.getOption(
            "油温",
            this.data.categoryData,
            this.data.fahou,
            "时间(s)",
            "阀后水压(m)"
          )
        );
      });
    },
    initChart() {
      this.chart1 = this.$echarts.init(document.getElementById("myChart1"));
      this.chart2 = this.$echarts.init(document.getElementById("myChart2"));
      this.chart3 = this.$echarts.init(document.getElementById("myChart3"));
      this.chart4 = this.$echarts.init(document.getElementById("myChart4"));
      // var option = this.getOption();
      // var option = this.getOption();
      // var option = this.getOption();
      // var option = this.getOption();
      this.chart1.setOption(option);
      this.chart2.setOption(option);
      this.chart3.setOption(option);
      this.chart4.setOption(option);
    }
  }
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->

